<template>
    <view class="wanlshop-category-container">
        <!-- 导航条 -->
        <view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
            <view class="cu-bar fixed bg-white solid-bottom"
                :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px', }">
                <!-- <view class="action" @tap="handleGroups">
					<text class="wlIcon-pintuan3"></text>
					<view class="cu-tag badge">拼</view> 
				</view> -->
                <view class="search-form round">
                    <text class="wlIcon-sousuo1 text-bold"></text>
                    <swiper class="search-swiper placeholder" vertical autoplay circular interval="3000">
                        <swiper-item @tap="productSearch('')">搜索商品、类目</swiper-item>
                        <swiper-item v-for="(item, index) in common.modulesData.searchModules" :key="index"
                            @tap="productSearch(item.keywords)">
                            {{ item.keywords }}
                        </swiper-item>
                    </swiper>
                </view>
                <!-- #ifndef MP -->
                <view class="action" @tap="showModal('menu')">
                    <text class="wlIcon-gengduo"></text>
                    <!-- {{( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum )}} -->
                    <view class="cu-tag badge bg-orange" v-if="
                        statistics.notice.notice +
                        statistics.notice.order +
                        statistics.notice.chat +
                        statistics.order.pay +
                        statistics.order.delive +
                        statistics.order.receiving +
                        statistics.order.evaluate +
                        cart.cartnum >
                        0
                    "></view>
                </view>
                <!-- #endif -->
            </view>
        </view>
        <!-- 加载类目 -->
        <wanl-shop-classify :mainHeight="height" :categoryStyle="parseInt(common.appStyle.category_style)"
            :categoryData="common.modulesData.categoryModules" :adverData="common.adData.categoryAdverts" />
        <!-- 模态框 -->
        <view class="WANL-MODAL" @touchmove.stop.prevent="moveHandle">
            <view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal()">
                <view class="wanl-modal-menu cu-dialog" @tap.stop="">
                    <wanl-direct @change="hideModal" />
                </view>
            </view>
            <!-- 分享 -->
            <view class="cu-modal wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''"
                @tap="hideModal()">
                <view class="cu-dialog" @tap.stop="">
                    <wanl-share ref="wanlShare" page="pages/category" :scene="{ qr: 'c' }"
                        :scrollAnimation="scrollAnimation" @change="hideModal" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from "vuex";
import wanlShopClassify from "@/components/wanl-shop/classify";
export default {
    data() {
        return {
            height: 0,
            modalName: null,
            scrollAnimation: 300,
        };
    },
    components: {
        wanlShopClassify,
    },
    computed: {
        ...mapState(["common", "statistics", "cart"]),
    },
    onLoad() {
        let wanlsys = this.$wanlshop.wanlsys();
        // #ifdef APP-PLUS
        this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height;
        // #endif
        // #ifdef H5
        this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height - 50;
        // #endif
        // #ifdef MP
        this.height = wanlsys.windowHeight - wanlsys.height;
        // #endif
        // #ifdef MP-WEIXIN
        wx.showShareMenu({
            withShareTicket: true,
            menus: ["shareAppMessage", "shareTimeline"],
        });
        // #endif
    },
    methods: {
        // 弹出层
        showModal(name) {
            // 滚动下分享
            if (name == "share" && this.modalName != "share") {
                setTimeout(() => {
                    this.scrollAnimation = 0;
                }, 300);
            }
            this.modalName = name;
        },
        hideModal(name) {
            if (name) {
                this.showModal(name);
            } else {
                // 强制关闭海报
                if (this.modalName == "share") {
                    this.$refs.wanlShare.closePoster();
                }
                this.modalName = null;
            }
        },
        handleGroups() {
            this.$wanlshop.to("/pages/apps/groups/index");
        },
        productSearch(text) {
            this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, "fade-in", 100);
        },
        //禁止父元素滑动 1.0.3升级
        moveHandle() { },
    },
};
</script>

<style>
.cu-custom .cu-bar {
    z-index: 99;
}

.cu-bar .action {
    position: relative;
}

/* #ifdef MP */
.cu-bar .search-form {
    margin: 0 0 0 25rpx;
}

/* #endif */
</style>
